import React, { Component } from 'react';
import {PageDivideWrapper} from "../style";
import { connect } from 'react-redux'

import {actionCreators} from "../store";
class PageDivide extends Component {
  constructor(props){
    super(props);
    this.ProducePageList = this.ProducePageList.bind(this);
  }
  render() {
    const { currentPage, nextPage,prePage, totalPage,groupCount, FirstFilter,
      SecondFilter,ThirdFilter,InputValue,pageSize} = this.props;
    const Pages = this.ProducePageList();
    return (

      <PageDivideWrapper>
        <ul className = {'page'}>
          <li className={currentPage===1?'nomore':''}  onClick={() => {
            if(currentPage===1){
              return;
            }
            prePage(currentPage,groupCount,InputValue,FirstFilter,SecondFilter,ThirdFilter,pageSize)}
          } >上一页</li>
          {Pages}
          <li className={currentPage=== totalPage?'nomore':'' }
              onClick={() => {
                if(currentPage===totalPage){
                  return;
                }
                nextPage(currentPage,groupCount,InputValue,FirstFilter,SecondFilter,ThirdFilter,pageSize)
              }}>下一页</li>
        </ul>
      </PageDivideWrapper>
    )
  }
  ProducePageList() {
    const { totalPage, currentPage,setPage,startPage,groupCount,FirstFilter,
      SecondFilter,ThirdFilter,InputValue, pageSize} = this.props;
    const arr = []
    if(totalPage<=10) {
      for (let i = 1; i <=totalPage; i++) {
        arr.push(<li key={i}
                     className={i===currentPage? 'active' :''}
                     onClick={() => setPage(i,InputValue,FirstFilter,SecondFilter,ThirdFilter,pageSize)}>{i}</li>)
      }
    }else{
      let res =0;
      for(let i =startPage;i<groupCount+startPage&&i<=totalPage;i++){
        arr.push(<li key={i}
                     className={i===currentPage? 'active' :''}
                     onClick={() => setPage(i,InputValue,FirstFilter,SecondFilter,ThirdFilter,pageSize)}>{i}</li>)
        res = i;
      }
      if(totalPage-startPage>=9) {
        arr.push(<li className={'ellipsis'} key={-1}>...</li>)
      }
      if(res<totalPage-1) {
        arr.push(<li key={totalPage - 1}
                     className={totalPage - 1 === currentPage ? 'active' : ''}
                     onClick={() =>
                       setPage(totalPage - 1,InputValue,FirstFilter,SecondFilter,ThirdFilter,pageSize)
                     }>{totalPage - 1}</li>)
        arr.push(<li key={totalPage}
                     className={totalPage === currentPage ? 'active' : ''}
                     onClick={() =>
                       setPage(totalPage,InputValue,FirstFilter,SecondFilter,ThirdFilter,pageSize)
                     }>{totalPage}</li>)
      }
    }
    return arr;
  }
}
const mapStateToProps = (state) => {
  return {
    totalPage: state.get('search').get('totalPage'),
    currentPage: state.get('search').get('currentPage'),
    groupCount: state.get('search').get('groupCount'),
    startPage: state.get('search').get('startPage'),
    FirstFilter: state.get('search').get('FirstFilter'),
    SecondFilter: state.get('search').get('SecondFilter'),
    ThirdFilter: state.get('search').get('ThirdFilter'),
    InputValue: state.get('search').get('InputValue'),
    pageSize: state.get('search').get('pageSize')
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    nextPage(currentPage,groupCount,value,First,Second,Third,pageSize){
      if(currentPage%groupCount ===0){
        dispatch(actionCreators.changeStartPage(currentPage+1))
      }
      dispatch(actionCreators.getNextPage(1,currentPage,First,Second,Third,value,pageSize))
    },
    prePage(currentPage,groupCount,value,First,Second,Third,pageSize){
      if((currentPage-1)%groupCount===0){
        dispatch(actionCreators.changeStartPage(currentPage-groupCount))
      }
      dispatch(actionCreators.getNextPage(-1,currentPage,First,Second,Third,value,pageSize))
    },
    setPage(nextPage,value,First,Second,Third,pageSize){
      dispatch(actionCreators.getNextPage(0,nextPage,First,Second,Third,value,pageSize))
    }
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(PageDivide)
